<template>
  <el-popover style="margin-left: 10px" ref="filterConditionRef" placement="bottom" width="500" trigger="click">
    <div v-for="(item, index) in data" :key="index" class="select-item">
      <div class="form-con">
        <el-select
          style="width: 200px"
          filterable
          clearable
          v-model="item.property"
          @change="fieldChange(item, index)"
          placeholder="请选择"
        >
          <el-option v-for="item in options" :key="item.prop" :label="item.label" :value="item.prop"> </el-option>
        </el-select>
        <el-select style="width: 150px" filterable clearable v-model="item.mark" placeholder="请选择">
          <el-option v-for="item in markOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        <el-date-picker
          style="width: 250px"
          v-if="item.type === 'date'"
          v-model="item.value"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
        <el-select
          style="width: 250px"
          v-else-if="item.type === 'select' && !item.relSearchFlag"
          filterable
          clearable
          default-first-option
          v-model="item.value"
          allow-create
          placeholder="请选择"
        >
          <el-option
            v-for="item in optionData[item.property]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          style="width: 250px"
          v-else-if="item.type === 'select' && item.relSearchFlag"
          filterable
          clearable
          :loading="loading"
          remote
          allow-create
          :remote-method="
            (query) => {
              filterMethodHandle(query, item);
            }
          "
          @focus="
            () => {
              filterMethodHandle('', item);
            }
          "
          default-first-option
          v-model="item.value"
          placeholder="请选择"
        >
          <el-option
            v-for="item in optionData[item.property]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-input style="width: 250px" v-else placeholder="请输入" size="small" v-model="item.value" />
        <div class="close-btn select-line-icon" @click="removeSelectItem(index)">
          <i class="el-icon-remove-outline" />
        </div>
      </div>
    </div>
    <div>
      <el-button style="padding-bottom: 0" icon="el-icon-circle-plus-outline" type="text" @click="addSelectItem">
        添加条件
      </el-button>
    </div>
    <div class="submit-box">
      <el-button @click.prevent="reset">重 置</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </div>
    <el-button class="filter-icon" type="text" slot="reference">
      <i class="iconfont">&#xe606;</i>
      <span class="filter-num">{{ num }}</span>
      <div>筛选</div>
    </el-button>
  </el-popover>
</template>

<script>
import { getSearchConditionValue, batchGetSearchConditionValueApi } from "api/riskCenterApi";
import { listSearchValueApi, listSearchRelateApi } from "api/api";
export default {
  name: "filterCondition",
  props: {
    options: {
      type: Array,
      default: () => {
        return [];
      },
    }, //这是列的数据
  },
  components: {},
  data() {
    return {
      loading: false,
      optionData: {},
      extraParams: {}, //需要关联字段
      data: [this.getNewRow()],
      markOptions: [
        { label: "等于", value: "=" },
        { label: "不等于", value: "!=" },
        { label: "大于", value: ">" },
        { label: "大于等于", value: ">=" },
        { label: "小于", value: "<" },
        { label: "小于等于", value: "<=" },
        { label: "包含", value: "like" },
        { label: "不包含", value: "not like" },
      ],
    };
  },
  computed: {
    num() {
      return this.data.filter((item) => item.property && item.value && item.mark).length || "";
    },
  },
  mounted() {},
  methods: {
    getNewRow() {
      return { property: "", mark: "=", value: "" };
    },
    getConditionType() {
      this.conditionTypes = [];
      this.options.forEach((item) => {
        !item.relSearchFlag && item.searchFormType === "select" && this.conditionTypes.push(item.property);
      });
      return this.conditionTypes;
    },
    batchGetSearchConditionOptions() {
      let { type, source } = this.$store.state;
      type &&
        batchGetSearchConditionValueApi({
          status: this.status,
          type,
          source,
          conditionTypes: this.getConditionType(), //获取能下拉选项的字段（没有关联的字段）
        }).then((res) => {
          console.log(res);
          this.optionData = res.data;
        });
    },
    //资产中心批量获取下拉数据
    listSearchValue() {
      let { type, source, group } = this.$store.state;
      listSearchValueApi({ type, source, group, property: this.getConditionType() }).then((res) => {
        this.optionData = res.data;
      });
    },
    filterMethodHandle(query, item) {
      console.log("[ query ] >", query);
      this.loading = true;
      let { type, source, group } = this.$store.state;
      const params = { status: this.status, type, source, conditionType: item.property, extraParams: {} };

      for (let key in this.extraParams) {
        params.extraParams[key] = this.data.find((d) => d.property === key && d.relSearchFlag === 1)?.value || "";
      }
      params.extraParams[item.property] = query;
      //relSearchFlag 0/1/2 不关联/关联数据/模糊查数据
      params.extraParams = item.relSearchFlag === 2 ? undefined : params.extraParams;
      if (!type) return;
      if (this.pageType === "asset") {
        listSearchRelateApi({
          type,
          source,
          group,
          name: item.property,
          extras: params.extraParams,
        }).then((res) => {
          let data = res.data;
          this.loading = false;
          this.$set(this.optionData, item.property, data);
        });
      } else {
        getSearchConditionValue(params).then((res) => {
          let data = res.data;
          this.loading = false;
          this.$set(this.optionData, item.property, data);
        });
      }
    },
    fieldChange(item, index) {
      item.value = ""; //置空一下
      let option = this.options.find((option) => option.property === item.property);
      if (option) {
        let list = this.data[index];
        this.$set(list, "type", option.searchFormType);
        this.$set(list, "relSearchFlag", option.relSearchFlag);
      }

      console.log("[ item ] >", item);
      console.log("[ data ] >", this.data);
    },
    removeSelectItem(index) {
      if (this.data.length == 1) {
        this.data.splice(index, 1, this.getNewRow());
      } else {
        this.data.splice(index, 1);
      }
    },
    addSelectItem() {
      this.data.push(this.getNewRow());
    },
    clear() {
      this.data = [this.getNewRow()];
    },
    reset() {
      this.clear();
      this.confirm();
    },
    confirm() {
      this.$refs.filterConditionRef.doClose();
      let data = this.data.filter((item) => item.property && item.mark && item.value);
      this.$emit("filter-confirm", data);
      console.log("filter", data);
    },
  },
  watch: {
    $route: {
      immediate: true,
      deep: true,
      handler(newVal) {
        if (newVal) {
        }
      },
    },
    options: {
      immediate: true,
      deep: true,
      handler(newVal) {
        if (newVal.length > 0) {
          let type = this.$route.path.split("/")[1];
          this.pageType = type;
          //如果是工单中心的，接口需要用到status
          this.status = type == "task" ? this.$route.params.status : "";
          //批量获取下拉数据 资产中心/风险中心，工单中心
          type == "asset" ? this.listSearchValue() : this.batchGetSearchConditionOptions();
          newVal.forEach((item) => {
            if (item.relSearchFlag) {
              this.extraParams[item.property] = "";
            }
          });
        }
      },
    },
  },
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.form-con {
  display: flex;
  margin-left: 10px;
  .el-select {
    margin-right: 5px;
  }
}
.select-item {
  margin-bottom: 5px;
}
.close-btn {
  display: flex;
  margin-left: 5px;
  align-items: center;
  cursor: pointer;
  color: #f56c6c;
  font-size: 18px;
}
.submit-box {
  text-align: right;
  margin-top: 5px;
}
.filter-icon {
  color: #333;
  .filter-num {
    font-size: 15px;
    font-weight: 600;
    color: #fa8919;
    margin-right: 2px;
    margin-left: -2px;
  }
  ::v-deep span {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .iconfont {
    margin-right: 5px;
    font-size: 14px;
  }
}
</style>
